<style>

</style>
<template>
    <span>  <slot>
            </slot>
    </span>
</template>
<script>
    Rap.define('', '', function () {
        var table_column_id = 0;
        return {
            name: 'ly-table-column',
            props: {
                label: {
                    'defalut': ''
                },
                align: {
                    'default': 'left'
                },
                width: {
                    'default': 0
                },
                flex: {
                    'default': null
                },
                name: String
            },
            data: function () {
                table_column_id++;
                return {
                    real_flex: 0,
                    real_width: 0,
                    table_column_id: table_column_id,
                    headers: [],
                    column: null
                }
            },
            computed: {
                owner: function () {
                    var parent = this.$parent;
                    while (parent && !parent.tableId) {
                        parent = parent.$parent;
                    }
                    return parent;
                },
                parentColumn: function () {
                    var parent = this.$parent;
                    if (parent.table_column_id) {
                        return parent;
                    }
                }
            }, mounted: function () {
                var me = this;
                if (this.parentColumn) {
                    this.column = {
                        name: this.name,
                        width: this.width,
                        flex: this.flex,
                        label: this.label,
                        align: this.align,
                        contentRender: this.$scopedSlots.default
                    };
                    this.parentColumn.addHeader(this.column,this.parentColumnIndex());
                } else {
                    var owner = this.owner;
                    var width = 0;
                    if (this.headers && this.headers.length > 0) {
                        for (var i = 0; i < this.headers.length; i++) {
                            var header = this.headers[i];
                            width += header['width'];
                        }
                        if (this.width > width) {
                            width = this.width;
                        }
                        this.column = {
                            name: this.name,
                            width: width,
                            flex: this.flex,
                            flex_def: this.headers.length,
                            label: this.label,
                            align: this.align,
                            headerRender: function (createElement) {
                                var itemEls = [];
                                for (var i = 0; i < me.headers.length; i++) {
                                    var header = me.headers[i];
                                    itemEls.push(createElement('div', {
                                        'class': 'ly-table-header-item-child', style: {
                                            flex: (!header.width && !header.flex) ? 1 : header.flex,
                                            width: header.width + 'px',
                                            'text-align': header.align
                                        }
                                    }, header.label));
                                }
                                return itemEls;
                            },
                            contentRender: function (createElement, scope) {
                                var children = [];
                                var items = scope.row[me.name];
                                for (var m = 0; m < items.length; m++) {
                                    var item = items[m];
                                    var itemEls = [];
                                    for (var i = 0; i < me.headers.length; i++) {
                                        var header = me.headers[i];
                                        var itemEl = header.contentRender.call(this, {
                                            column: header,
                                            row: scope.row,
                                            item: item,
                                            index: scope.index
                                        });
                                        itemEls.push(createElement('span', {
                                            'class': 'ly-table-content-item-child', style: {
                                                flex: (!header.width && !header.flex) ? 1 : header.flex,
                                                width: header.width + 'px',
                                                'text-align': header.align
                                            }
                                        }, itemEl));
                                    }
                                    var childEl = createElement('div', {'class': 'ly-table-content-item-has-child'}, itemEls);
                                    children.push(childEl);
                                }
                                return children;
                            },
                            child_count:this.headers.length,
                            has_child: true
                        };
                        owner.addColumn(this.column, this.elIndex());
                    } else {
                        this.column = {
                            name: this.name,
                            width: this.width,
                            flex: this.flex,
                            flex_def: 1,
                            label: this.label,
                            align: this.align,
                            contentRender: this.$scopedSlots.default,
                            headerRender: function () {
                                return me.label;
                            },
                            has_child: false
                        };
                        owner.addColumn(this.column, this.elIndex());
                    }

                }
            }, methods: {
                addHeader: function (column,index) {
                    if(this.headers.length<=index){
                        this.headers.push(column);
                    }else{
                        this.headers.splice(index, 0,column)
                    }
                    if(this.column){
                        this.column.child_count=this.headers.length;
                    }

                }, removeHeader: function (column) {
                    this.headers.splice(this.headers.indexOf(column), 1);
                    if(this.column){
                        this.column.child_count=this.headers.length;
                    }
                }
                , elIndex: function () {
                    var children = this.$parent.$refs.header_hidden.children;
                    var index = -1;
                    for (var i = 0; i < children.length; i++) {
                        var child = children[i];
                        if (child.className == 'ly-table-column-hidden') {
                            index++;
                        }
                        if (child == this.$el) {
                            this.index = index;
                            return index;
                        }
                    }

                    return index;
                },parentColumnIndex:function () {
                    var children = this.$parent.$el.children;
                    return [].indexOf.call(children,this.$el);
                }
            },
            beforeDestroy: function () {
                if (!this.parentColumn) {
                    this.owner.removeColumn(this.column)
                } else {
                    this.parentColumn.removeHeader(this.column);
                }
            }
            , render: function (h) {
                return h('span', {'class': 'ly-table-column-hidden'}, this.$slots.default);
            }
        }
    });
</script>
